<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="styles/simditor.css" />
		<script src="jquery.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="scripts/module.min.js"></script>
		<script type="text/javascript" src="scripts/hotkeys.min.js"></script>
		<script type="text/javascript" src="scripts/uploader.min.js"></script>
		<script type="text/javascript" src="scripts/simditor.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.box {
				width: 1200px;
				border: solid 1px #ccc;
				margin: auto;
				padding: 20px;
			}
			
			.y_detail h2 {
				font-size: 30px;
				margin: 25px 0;
				border-left: solid 5px #FF6600;
				padding-left: 15px;
			}
			
			#novel {
				margin-bottom: 30px;
			}
			
			.y_left {
				width: 400px;
				float: left;
			}
			
			.y_img {
				width: 400px;
				height: 500px;
			}
			
			.y_img img {
				width: 400px;
				height: 500px;
			}
			
			.y_left #read_btn {
				width: 300px;
				height: 60px;
				display: block;
				margin: auto;
				background: #ff6600;
				border: none;
				outline: none;
				font-size: 26px;
				color: #FFF;
				margin-top: 30px;
				text-align: center;
				line-height: 60px;
			}
			
			.y_right {
				margin-left: 430px;
			}
			
			.y_text h4 {
				font-size: 36px;
				margin-top: 10px;
				line-height: 60px;
			}
			
			.y_right #y_author {
				font-size: 22px;
				line-height: 40px;
			}
			
			.y_novel_txt div {
				font-size: 16px;
				text-indent: 2em;
			}
			
			.y_novel_list li div {
				float: right;
				display: none;
			}
			
			.y_novel_list li:hover div {
				display: block;
			}
			
			.y_novel_list li i,
			.y_novel_list li span {
				margin-top: 20px;
				margin-left: 10px;
				padding: 2px;
				background: #FFF;
				border: none;
				cursor: pointer;
				font-style: normal;
			}
			
			.y_novel_list li i:hover {
				color: #6f34f9;
				border-bottom: solid 1px #6F34F9;
			}
			
			.y_novel_list li span:hover {
				color: #ad292d;
				border-bottom: solid 1px red;
			}
			
			.y_right_text {
				font-size: 20px;
				line-height: 50px;
			}
			
			.y_novel_list h4 {
				font-size: 20px;
			}
			
			.y_novel_list li {
				width: 500px;
				font-size: 16px;
				float: left;
				line-height: 58px;
				margin-left: 30px;
				padding-left: 15px;
				padding-right: 10px;
				border-bottom: solid 1px #FF6600;
			}
			
			.y_commend {
				margin-top: 30px;
			}
			
			.y_commend h3 {
				font-size: 20px;
				line-height: 60px;
			}
			
			#y_commend_list img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			
			#y_commend_list .y_commend_text {
				margin-left: 80px;
				margin-top: 10px;
				line-height: 30px;
				font-size: 14px;
			}
			
			.y_commend_user p {
				font-size: 18px;
				float: left;
				margin-left: 20px;
				margin-top: 30px;
			}
			
			.y_commend_user img {
				font-size: 14px;
				float: left;
			}
			
			#y_commend_li li img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			
			#y_commend_li li .y_commend_cont {
				margin-left: 80px;
				margin-top: 10px;
				line-height: 30px;
				font-size: 14px;
			}
			
			.y_commend_name p {
				font-size: 18px;
				float: left;
				margin-left: 20px;
				margin-top: 30px;
			}
			
			.y_commend_name img {
				font-size: 14px;
				float: left;
			}
			
			#y_commend_li li {
				border-bottom: solid 1px;
			}
			
			#read_btn {
				text-decoration: none;
			}
			
			#sc_btn {
				width: 50px;
				height: 50px;
				border: solid 1px;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
				position: fixed;
				right: 160px;
				bottom: 100px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_detail">
				<h2>小说详情</h2>
			</div>
			<div id="novel" class="clearfix">
				<div class="y_left">
					<div class="y_img">
						<img src="" alt="" id="novel_img" />
					</div>
					<a id="read_btn">开始阅读</a>
					<button id="sc_btn">收藏</button>
				</div>
				<div class="y_right">
					<div class="y_text">
						<h4 id="y_novel_tit">小说名</h4>
						<p id="y_author">作者</p>
					</div>
					<div class="y_right_text">
						<p>内容简介:</p>
						<div class="y_novel_txt">
							<div>此时，我的心情兴奋到极点，好久好久没有看过如此美的景色了。若果我有一双会画画的手，我定把这如痴如醉的荷塘活色生香的描绘一番；若果我有一部高像素的相机，我定不放过每个花开的镜头；若果我是一个诗人，我定把这荷塘每片光鲜艳丽的色泽融入人生的诗篇。此时，我的心情兴奋到极点，好久好久没有看过如此美的景色了。若果我有一双会画画的手，我定把这如痴如醉的荷塘活色生香的描绘一番；若果我有一部高像素的相机，我定不放过每个花开的镜头；若果我是一个诗人，我定把这荷塘每片光鲜艳丽的色泽融入人生的诗篇。</div>
						</div>
					</div>
				</div>
			</div>
			<ul class="y_novel_list clearfix">
				<h4>小说章节:</h4>
			</ul>
			<div class="y_commend">
				<div id="y_commend_list" style="border-bottom: solid 1px ;">
					<div class="y_commend_user clearfix">
						<img src="" alt="" />
						<p></p>
					</div>
					<input type="text" style="width: 100%;"></input>
					<button id="pl_btn" class="btn btn-primary">确认评论</button>
				</div>
				<div class="y_commend_tit">
					<h3>最新评论：</h3>
				</div>
				<ul id="y_commend_li">
				</ul>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">Modal title</h4>
					</div>
					<div class="modal-body">
						<div>
							<label for="text">章节内容</label>
							<textarea id="editor" autofocus></textarea>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="lu_btn">录入</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			var editor = new Simditor({
				textarea: $('#editor')
			});
			var href = 'http://localhost:8000'
			var suid = location.href.split('?')[1].split('=')[1]
			console.log(suid)
			$.ajax({
				type: "post",
				url: href + "/users/xiang",
				data: {
					loginuid: suid
				},
				success(data) {
					console.log(data[0])
					$('#novel_img').attr('src', data[0].novelimg)
					$('#y_novel_tit').html(data[0].novelname)
					$('#y_author').html('作者:' + data[0].author)
					$('.y_novel_txt div').html(data[0].novelsyn)
					var num = data[0].numbers
					var uid = data[0].uid
					num++
					$.ajax({
						type: "post",
						url: href + "/users/click",
						data: {
							num: num,
							uid: uid
						},
						success(data) {
							console.log(data)
						}
					});
					$.ajax({
						type: "post",
						url: href + "/users/list",
						data: {
							searchuid: data[0].uid
						},
						success(data) {
							console.log(data)
							data.forEach(function(o, i) {
								var oA = $('<a>').append($('<li>').html(data[i].booklist + '<div><i data-toggle="modal" data-target="#myModal" data-list="' + data[i].booklist + '" data-suid="' + data[i].searchuid + '">修改</i><span  data-list="' + data[i].booklist + '" data-suid="' + data[i].searchuid + '">删除</span></div>'))
								oA.attr('uid', data[i].searchuid)
								$('#read_btn').attr('uid', data[i].searchuid)
								$('.y_novel_list').append(oA)
							})
						}
					})
				}
			});
			$('.y_novel_list').on('click', 'a', function() {
				var str = $(this).html().split('>')[1].split('<')[0]
				var uid = $(this).attr('uid')
				$(this).attr('href', href + '/content.html?cont=' + str + '&uid=' + uid)
			})
			$('#read_btn').on('click', function() {
				var str = $('.y_novel_list a').eq(0).html().split('<')[1].split('>')[1]
				var uid = $(this).attr('uid')
				$(this).attr('href', href + '/content.html?cont=' + str + '&uid=' + uid)
			})
			$('.y_novel_list').on('click', 'i', function(e) {
				var evt = e || event
				e.preventDefault()
				$('.modal-title').html($(this).attr('data-list'))
				var str = $(this).attr('data-list')
				var uid = $(this).attr('data-suid')
				$('.modal-title').attr('data-buid', uid)
				$.ajax({
					type: "post",
					url: href + "/users/cont",
					data: {
						cont: str,
						uid: uid
					},
					success(data) {
						console.log(data)
						$('.simditor-body').html(data[0].text)
					}
				});
			})
			$('#lu_btn').on('click', function() {
				var blist = $('.modal-title').html()
				var bsuid = $('.modal-title').attr('data-buid')
				var btext = $('.simditor-body').html()
				$.ajax({
					type: "post",
					url: href + "/users/xiu",
					data: {
						blist: blist,
						bsuid: bsuid,
						btext: btext
					},
					success(data) {
						console.log(data)
						$('.simditor-body').html(data.sql)
					}
				});
			})
			$('.y_novel_list').on('click', 'span', function(e) {
				var evt = e || event
				e.preventDefault()
				var list = $(this).attr('data-list')
				var uid = $(this).attr('data-suid')
				var _this = $(this).parents()[2]
				console.log(_this)
				$.ajax({
					type: "post",
					url: href + "/users/del",
					data: {
						blist: list,
						suid: uid
					},
					success(data) {
						console.log(data)
						_this.remove()
					}
				});
			})
			if(localStorage.user) {
				$('.y_commend_user p').html(localStorage.user)
				$('.y_commend_user img').attr('src', localStorage.img)
			}
			$('#pl_btn').on('click', function() {
				if($('#y_commend_list input').val() == '') {
					alert('评论内容不能为空')
				} else {
					$.ajax({
						type: "post",
						url: href + "/users/cpl",
						data: {
							loginuser: localStorage.user,
							loginimg: localStorage.img,
							loginuid: localStorage.uid,
							searchuid: suid,
							cont: $('#y_commend_list input').val()
						},
						success(data) {
							console.log(data)
							$.ajax({
								type: "post",
								url: href + "/users/zpl",
								data: {
									cont: $('#y_commend_list input').val()
								},
								success(data) {
									console.log(data)
									var oLi = $('<li>').append($('<div class="y_commend_name clearfix">').append($('<img>').attr('src', data[0].loginimg)).append($('<p>').html(data[0].loginuser))).append($('<div class="y_commend_cont">').html(data[0].text))
									$('#y_commend_li').prepend(oLi)
								}
							});
							$('#y_commend_list input').val('')
						}
					});
				}
			})
			$.ajax({
				type: "post",
				url: href + "/users/spl",
				data: {
					loginuid: localStorage.uid,
					searchuid: suid,
				},
				success(data) {
					console.log(data)
					data.forEach(function(o, i) {
						var oLi = $('<li>').append($('<div class="y_commend_name clearfix">').append($('<img>').attr('src', data[i].loginimg)).append($('<p>').html(data[i].loginuser))).append($('<div class="y_commend_cont">').html(data[i].text))
						$('#y_commend_li').prepend(oLi)
					})
				}
			});
			$('#sc_btn').on('click', function() {
				if($('#sc_btn').html() == '收藏') {
					$.ajax({
						type: "post",
						url: href + "/users/csc",
						data: {
							user: localStorage.user,
							img: localStorage.img,
							uid: localStorage.uid,
							suid: suid,
							simg: $('#novel_img').attr('src'),
							sname: $('#y_novel_tit').html()
						},
						success(data) {
							console.log(data)
							$('#sc_btn').html('已收藏')
						}
					});
				} 

			})
			$.ajax({
				type: "post",
				url: href + "/users/cxsc",
				data: {
					uid: localStorage.uid,
					suid: suid
				},
				success(data) {
					$('#sc_btn').html(data)
				}
			});
		</script>
	</body>

</html>